<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('问卷调查标题')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_name" data-rule="required" class="form-control" name="row[title]" type="text" value="">
        </div>
    </div>

    <div id="editor-container">
        <div class="editor-row" data-value="0">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('问题')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-service_question" data-rule="required" class="form-control" name="row[question_answer][0][question]" type="text" value="" placeholder="请输入问题">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('类型')}:</label>
                <div class="col-xs-12 col-sm-8">
                    {:build_radios('row[question_answer][0][type]', [ '1'=>__('单选'), '2'=>__('复选') ])}
                </div>
            </div>
    
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('答案')}:</label>
                <div class="col-xs-12 col-sm-8 answer">
                    <div class="answer-div">
                        <div class="answer-input">
                            <input id="c-service_answer" data-rule="required" class="form-control" name="row[question_answer][0][answer][]" type="text" value="" placeholder="请输入答案">
                            <a href="javascript:;" class="btn btn-danger del-answer" style="float: right;"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    
                    <a href="javascript:;" data-value="0" class="btn btn-primary add-answer" style="float: right;"><i class="fa fa-plus"></i></a>
                    
                </div>
            </div>
    
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="button" class="btn btn-danger remove-editor" style="float: right;">删除问题</button>
                </div>
            </div>
            <hr>
        </div>
    </div>
    
    <button type="button" id="add-input" class="btn btn-primary" style="margin-left: 17%;">增加问题</button>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>


<script>
    $(document).ready(function() {
        // 点击添加问题按钮
        $('#add-input').click(function() {
            var dataValue = $(".editor-row").last().attr("data-value");
            dataValue = parseInt(dataValue)+1;
            var newEditor = `
            <div class="editor-row" data-value="` + dataValue + `">
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('问题')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-service_question" data-rule="required" class="form-control" name="row[question_answer][` + dataValue + `][question]" type="text" value="" placeholder="请输入问题">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('类型')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        {:build_radios('row[question_answer][` + dataValue + `][type]', [ '1'=>__('单选'), '2'=>__('复选') ])}
                    </div>
                </div>
        
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('答案')}:</label>
                    <div class="col-xs-12 col-sm-8 answer">
                        <div class="answer-div">
                            <div class="answer-input">
                                <input id="c-service_answer" data-rule="required" class="form-control" name="row[question_answer][` + dataValue + `][answer][]" type="text" value="" placeholder="请输入答案">
                                <a href="javascript:;" class="btn btn-danger del-answer" style="float: right;"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        
                        <a href="javascript:;" data-value="` + dataValue + `" class="btn btn-primary add-answer" style="float: right;"><i class="fa fa-plus"></i></a>
                        
                    </div>
                </div>
        
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2"></label>
                    <div class="col-xs-12 col-sm-8">
                        <button type="button" class="btn btn-danger remove-editor" style="float: right;">删除问题</button>
                    </div>
                </div>
                <hr>
            </div>`;
            $('#editor-container').append(newEditor);
            
        });

        //点击添加答案按钮
        $(document).on('click', '.add-answer', function() {
            var dataValue = $(this).attr("data-value");
            var newEditor = `
                <div class="answer-input">
                    <input id="c-service_answer" data-rule="required" class="form-control" name="row[question_answer][` + dataValue + `][answer][]" type="text" value="" placeholder="请输入答案">
                    <a href="javascript:;" class="btn btn-danger del-answer" style="float: right;"><i class="fa fa-times"></i></a>
                </div>`;
            $(this).parent(".answer").find(".answer-div").append(newEditor);
        });

        // 删除答案按钮事件
        $(document).on('click', '.del-answer', function() {
            $(this).closest('.answer-input').remove();
        });

        // 删除问题按钮事件
        $(document).on('click', '.remove-editor', function() {
            $(this).closest('.editor-row').remove();
        });
    });
</script>